<template>
  <footer class="footer">
    <span class="todo-count">
      合 计:<strong> {{ listLength }} </strong>
    </span>
    <button 
      @click="handleClear"
      class="clear-completed"
      :disabled="listLength === 0"
    >
      清空任务
    </button>
  </footer>
</template>

<script setup lang="ts">
interface Props {
  listLength: number
}

interface Emits {
  (e: 'clear-list'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const handleClear = () => {
  if (props.listLength > 0) {
    emit('clear-list')
  }
}
</script>